<!doctype html>
<html lang="en">
<head>
	<link rel="shortcut icon" href="/favicon.ico" >
	<meta charset="UTF-8">	
	<meta content="A weibo toy" name="description">
	<title>Weibo Toy beta 0.1</title>
	<?php echo Asset::js('jquery.min.js'); ?>
	<?php echo Asset::css('cssreset-min.css');?>
<style>
#container{
	width:60%;
	height:300px;
	margin:15% auto;
}	
#logo,
#form{
	float:left;
}
#form{
margin-left:50px;
margin-top:50px;
width:50%;
}
#form p{
width:500px;
height:30px;
margin-top:20px;
}
#form label{
font-size:20px;
}
#username,
#password{
margin-left:20px;
height:40px;
color:green;
font-weight:800;
font-size:25px;
vertical-align:middle;
}
#submit{
font-size:25px;
}
.msg{
color:#FE2617;
margin-left:5px;
font-weight:800;
font-size:20px;
}
</style>
<script>
$(document).ready(function() {
$('#login_form').submit(function() {
	$('#username').focus(function() {
		//$('#username_msg').html('');
		$('.msg').html('');
	});
	$('#password').focus(function() {
		//$('#password_msg').html('');
		$('.msg').html('');
	});
	var username = $('#username').val();
	var password = $('#password').val();
	if (username.length == 0) {
		$('#username_msg').html('请输入用户名~');
		return false;
	}	
	var r = /^[-_0-9a-zA-Z]{4,}$/;
	if (!r.test(username)) {
		$('#username_msg').html('用户名非法~');
		return false;
	}	
	if (password.length == 0) {
		$('#password_msg').html('请输入密码~');
		return false;
	}	
	
	$.post('/check', {'username': username, 'password': password}, function(v) {
		if (v.msg == 'succ') {
			window.location = '/bind';
		} else {
			$('#login_msg').html('登录失败,请重试~');
		}
	}, 'json');
	
	return false;
});
});
</script>
</head>
<body>
	<div id='container'>
		<div id='logo'><?php echo Asset::img('logo.png', array('width'=> 250, 'height' => 250)); ?></div>
		<div id='form'>
			<form method='post' action='/check' id='login_form'>
				<p class='username'>
					<label for='username'>用户:</label>
					<input size='15' type='text' name='username' value='' id='username' autocomplete="off"/>
					<span id='username_msg' class='msg'></span>
				</p>
				<p>
					<label for='password'>密码:</label>
					<input size='15' type='password' name='password' value='' id='password' />
					<span id='password_msg' class='msg'></span>
				</p>
				<p>
					<input id='submit' name='submit' type='submit' value='登录' />
					<span id='login_msg' class='msg'></span>
				</p>
			</form>
		</div>
	</div>
</body>
</html>
